<!-- 年规 - 团队规划 - 新增/编辑 -->
<template>
  <view>
    <view class="px-3.75 pt-3 pb-25">
      <view class="flex justify-between items-center text-28 c-#999">
        <view @click="onChargeUserClick">
          <text>负责人：</text>
          <text class="c-primary">{{ formData.chargeUser?.nickname || '待添加' }}</text>
        </view>
        <view class="flex items-center c-primary" @click="navigate('department')">
          <view class="pr-2">部门管理</view>
          <u-icon name="arrow-right" color="#f4af22" size="24" />
        </view>
      </view>
      <!-- 外贸部 -->
      <view v-for="(item, index) in formData.department" :key="index">
        <view class="py-3 text-40 c-#333 font-bold">{{ item.name }}</view>
        <view class="card-grey flex items-center">
          <view class="flex-shrink-0 w-200 c-#333">目标总人数</view>
          <u-input v-model="item.total_person" class="flex-1" placeholder="请输入" type="digit" />
        </view>
        <view class="card-grey flex items-center mt-2">
          <view class="flex-shrink-0 w-200 c-#333">原有人数</view>
          <u-input v-model="item.original_person" class="flex-1" placeholder="请输入" type="digit" />
        </view>
        <view class="card-grey flex items-center mt-2">
          <view class="flex-shrink-0 w-200 c-#333">新增人数</view>
          <u-input v-model="item.new_person" class="flex-1" placeholder="请输入" type="digit" />
        </view>
      </view>
      <!-- 计划 -->
      <view v-for="(item, index) in formData.plan" :key="index">
        <view class="py-3 text-40 c-#333 font-bold">
          <text>{{ item.name }}</text>
          <text v-if="item.name == '组织成长计划'" class="text-28">（内训+外训+企业顾问）</text>
        </view>
        <view v-for="(plan, planIndex) in item.plan_list" :key="planIndex" class="card-grey mb-2.5">
          <view class="flex items-center py-3 u-border-bottom" @click="onDateSelect(index, planIndex)">
            <view class="flex-shrink-0 w-186">日期</view>
            <view class="flex-1 flex items-center">
              <view class="pr-2 c-#999">{{ plan.month&&plan.day ? `${plan.month}月${plan.day}日` : '请选择日期' }}</view>
              <u-icon name="arrow-right" size="28" color="#999" />
            </view>
          </view>
          <view class="flex items-center pt-3">
            <view class="flex-shrink-0 w-186">计划</view>
            <u-input v-model="plan.content" class="flex-1" placeholder="请填写组织成长计划" :customStyle="{ fontSize: '28rpx' }" />
          </view>
          <view class="flex items-center pt-3">
            <view class="flex-shrink-0 w-186">完成情况</view>
            <u-radio-group v-model="plan.status" @change="radioGroupChange" active-color="#F4AF22">
              <u-radio :name="1">已完成</u-radio>
              <u-radio :name="2">未完成</u-radio>
            </u-radio-group>
          </view>


        </view>
        <view class="flex justify-center items-center card-grey py-1" @click="onAddPlan(item)">
          <u-icon name="plus-circle-fill" color="#F4AF22" size="28" />
          <view class="ml-1.25 c-primary">添加{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="bottom-wrap-16 px-3.75 bg-white" @click="onSubmit">
      <view class="btn-primary">保存</view>
    </view>
    <u-picker v-model="state.showDatePicker" mode="time" :params="dateParams" confirm-color="#F4AF22"
      @confirm="onDateConfirm" />

  </view>
</template>
<script setup>
import { navigate } from '@/common/util/uni'
import { getTeamPlanDetail, postTeamPlanAdd } from '@/common/http/module/plan'
import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'
import { showToast } from '@/common/util/uni'
const emit = defineEmits(['confirm'])

const userStore = useUserStore()
const planStore = usePlanStore()

const state = reactive({
  data: '',
  actionIndex: '',
  actionPlanIndex: '',
})

const formData = reactive({
  chargeUser: '',
  department: [],
  plan: [{ month: '',day:'', content: '', status: '1' }]
})

const dateParams = { year: false, month: true, day: true }

function onStatusChange(type) {
  const tmp = type == 'finish' ? 1 : 2
  formData.status = formData.status == tmp ? '' : tmp
}
function initFormData() {
  formData.department = state.data.department_list.map(item => {
    return {
      id: item.plan_list?.length > 0 ? item.plan_list[0].id : '',
      total_person: item.plan_list?.length > 0 ? item.plan_list[0].total_person : '',
      original_person: item.plan_list?.length > 0 ? item.plan_list[0].original_person : '',
      new_person: item.plan_list?.length > 0 ? item.plan_list[0].new_person : '',
      department_id: item.id,
      name: item.name,
      ...formData.department?.find(dep => dep.department_id == item.id),
    }
  })

  formData.plan = state.data.plan_list.map(item => {
    return {
      ...item,
      plan_list: item.plan_list.length > 0 ? item.plan_list : [{ month: '',day: '', content: '' }]
    }
  })

  formData.chargeUser = state.data.team_planning
  console.log('formData', formData);
}

function onDateConfirm(e) {
  const month = e.month
  const day = e.day
  formData.plan[state.actionIndex].plan_list[state.actionPlanIndex].month = parseInt(month)
  formData.plan[state.actionIndex].plan_list[state.actionPlanIndex].day = parseInt(day)
  console.log('onDateConfirm', formData.plan);
}

function onChargeUserClick() {
  const ids = formData.chargeUser?.user_id
  navigate(`/package_plan/pages/user/select?ids=${ids}&singleSelect=true`)
}

function onUserSelect(val) {
  formData.chargeUser = {
    user_id: val.user_id,
    nickname: val.user?.nickname
  }
}

function onDateSelect(index, planIndex) {
  state.actionIndex = index
  state.actionPlanIndex = planIndex
  state.showDatePicker = true
}

function onAddPlan(plan) {
  plan.plan_list.push({ month: '',day: '', content: '', status: '' })
}

function refresh() {
  getTeamPlanDetail(userStore.currentSocietyId, planStore.year).then(res => {
    state.data = res.data
    initFormData()
  })
}

function onSubmit() {
  const params = {
    club_id: userStore.currentSocietyId,
    year: planStore.year,
    team_planning_charge: formData.chargeUser?.user_id || formData.chargeUser?.id,
    department: formData.department,
    plan: formData.plan.reduce((total, item) => {
      const childPlanList = item.plan_list.map(plan => {
        return {
          ...plan,
          plan_id: item.id
        }
      })
      return total.concat(childPlanList)
    }, [])
  }
  postTeamPlanAdd(params).then(() => {
    showToast('保存成功')
    emit('confirm')
  })
}

onMounted(() => {
  refresh()
})

defineExpose({ onUserSelect, refresh })
</script>

<style lang="scss" scoped>
.card-grey {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  background-color: #F6F6F6;
  font-size: 28rpx;
}
</style>
